<template>
  <view class="content">
    <Head title="我的" @back="back" icon="" />
    <div class="backdrop">
      <div class="my">
        <div class="top">
          <div><img src="http://157.122.54.189:9060/img/avatar.png" /></div>
          <div>
            <p>{{ username }}</p>
            <p>17687916528</p>
          </div>
          <div>
            <p @click="news">
              <text class="iconfont icon-xinxi"></text><span>{{read?read:''}}</span>
            </p>
          </div>
        </div>
        <div class="bottom">
          <p @click="myRecord(ind)" v-for="(item, ind) in myList" :key="ind">
            <span><text :class="'iconfont ' + item.icon"></text></span
            ><span>{{ item.name }}</span>
          </p>
        </div>
      </div>
      <div class="triangle"></div>
    </div>
    <div class="list">
      <div @click="listDetail(ind)" v-for="(item, ind) in list" :key="ind">
        <p>
          <span>{{ item }}</span
          ><span>></span>
        </p>
      </div>
    </div>
    <div class="btn" @click="logOut">
      <b>{{ btnName }}</b>
    </div>
  </view>
</template>

<script>
import Head from "@/components/head/index";
import Events from '@/util/Events'
import { getUser, seeColl } from "@/service/index";

export default {
  components: { Head },
  data() {
    return {
      list: ["支付明细", "问题反馈", "联系客服"],
      myList: [
        {
          name: "我的发布",
          icon: "icon-cehuifabuwenjian"
        },
        {
          name: "收藏",
          icon: "icon-shoucang"
        },
        {
          name: "浏览历史",
          icon: "icon-renyanshijiao"
        }
      ],
      username: "",
      btnName: "退出登录",
      read:4
    };
  },
  async onLoad() {
       
  },
  onShow() {
    
  },
  async mounted() {
    Events.$on('list',(e)=>{
       console.log(e,44444444)
       this.read=e[0].map(item=>item.child).flat(2).filter(ite=>ite.isRead).length
     })
    let res = await getUser();
   let res1 =await seeColl();console.log(res, 999);
    
    if (res.status === 200) {
      this.username = res.body.nickname;
    } else {
      wx.removeStorageSync("openid");
      this.username = "未登录";
      this.btnName = "去登录页";
    }
  },
  methods: {
    
    back() {
      // debugger;
      // console.log(33333);
      wx.switchTab({
        url: "/pages/index/index"
      });
    },
    news() {
      if (wx.getStorageSync("openid")) {
        wx.navigateTo({
          url: "/pages/news/index"
        });
      } else {
        wx.reLaunch({
          url: "/pages/login/index"
        });
      }
    },
   
    myRecord(i) {
      console.log(wx.getStorageSync("openid"), 99999);
      if (wx.getStorageSync("openid") && i === 0) {
        wx.navigateTo({
          url: "/pages/myRelease/index"
        });
      } else if (wx.getStorageSync("openid") && i === 1) {
        wx.navigateTo({
          url: "/pages/collect/index"
        });
      } else if (wx.getStorageSync("openid") && i === 2) {
        wx.navigateTo({
          url: "/pages/browsing/index"
        });
      } else {
        wx.reLaunch({
          url: "/pages/login/index"
        });
      }
    },
    listDetail(i) {
      if (wx.getStorageSync("openid") && i === 0) {
        wx.navigateTo({
          url: "/pages/paymentDetails/index"
        });
      } else if (wx.getStorageSync("openid") && i === 1) {
        wx.navigateTo({
          url: "/pages/feedback/index"
        });
      } else if (wx.getStorageSync("openid") && i === 2) {
        wx.navigateTo({
          url: "/pages/contact/index"
        });
      } else {
        wx.reLaunch({
          url: "/pages/login/index"
        });
      }
    },
    logOut() {
      wx.removeStorageSync("token");
      wx.removeStorageSync("openid");
      wx.reLaunch({
        url: "/pages/login/index"
      });
    }
  }
};
</script>

<style scoped lang="scss">
.list {
  background-color: #eee;
  height: 300rpx;
  div {
    background-color: #fff;
    p {
      height: 80rpx;
      width: 80%;
      margin: 0 auto;
      line-height: 80rpx;
      margin-bottom: 20rpx;
      display: flex;
      justify-content: space-between;
    }
  }
}
.backdrop {
  background: linear-gradient(90deg, blue, skyblue);
  height: 400rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  .triangle {
    height: 0;
    width: 0;
    position: absolute;
    bottom: 0;
    border-top: 300rpx solid transparent;
    border-bottom: 300rpx solid #fff;
    border-left: 500rpx solid transparent;
    border-right: 500rpx solid transparent;
  }
  .my {
    // position: absolute;
    width: 90%;
    border-radius: 20rpx;
    background-color: #fff;
    z-index: 9;
    box-shadow: 0px 2px 5px #888888;
    .top {
      height: 150rpx;
      width: 95%;
      margin: 0 auto;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      .iconfont {
        color: skyblue;
        font-size: 50rpx;
      }
      img {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        background-color: red;
      }
      > div:nth-child(2) {
        margin-left: 20rpx;
        margin-right: 100rpx;
      }
      > div:nth-child(3) {
        position: relative;
        span {
          color: red;
          font-size: 24rpx;
          font-weight: 900;
          position: absolute;
          top: -10rpx;
          right: -10rpx;
        }
      }
    }
    .bottom {
      height: 150rpx;
      width: 95%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      p {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        .iconfont {
          font-size: 70rpx;
        }
        .iconfont {
          color: greenyellow;
        }
      }
      p:nth-child(2) {
        .iconfont {
          color: yellow;
        }
      }
      p:nth-child(3) {
        .iconfont {
          color: rgb(255, 47, 238);
        }
      }
    }
  }
}
.btn {
  position: fixed;
  bottom: 0;
  left: 5%;
  width: 90%;
  height: 100rpx;
  line-height: 100rpx;
  background-color: rgba(255, 101, 111, 1);
  border-radius: 120rpx;
  color: #fff;
  text-align: center;
  b {
    font-size: 36rpx;
    font-weight: 900;
  }
}
</style>
